ASP.NET Core: Cloud-ready, Enterprise Web Application Development by Ragupathi Mugilan T. S. & Sanctis Valerio De & Singleton James

Author:Ragupathi, Mugilan T. S. & Sanctis, Valerio De & Singleton, James [Ragupathi, Mugilan T. S.]
Language: eng
Format: azw3
Publisher: Packt Publishing
Published: 2017-06-09T04:00:00+00:00

Item Detail View

When we split our Item Detail View into two distinctive components (View mode and Edit mode), we also gave them a minimalistic, wiki-like tabbed interface. Now that we have Bootstrap we can further improve that approach by redesigning it into a more intuitive, visually engaging view-editor interface.

Display mode

Open the /Scripts/app/item-detail-view.component.ts and remove the @Component's styles section entirely. We won't need it anymore, as we'll be using our style.less file from now on.

Right after that, replace the template section HTML content with the following code:

<div *ngIf="item"> <h2> <a href="#" (click)="onBack()">&laquo; Back to Home</a> </h2> <div class="item-container"> <ul class="nav nav-tabs"> <li role="presentation"> <a href="#" (click)="onItemDetailEdit(item)">Edit</a> </li> <li role="presentation" class="active"> <a href="#">View</a> </li> </ul> <div class="panel panel-default"> <div class="panel-body"> <div class="item-image-panel"> <img src="/img/item-image-sample.png" alt="{{item.Title}}" /> <div class="caption">Sample image with caption.</div> </div> <h3>{{item.Title}}</h3> <p>{{item.Description}}</p> <p>{{item.Text}}</p> </div> </div> </div> </div>

There's a couple of things worth noting here:

We added a second <p> element to display the item.Text property

We don't support item image files yet, so we added a demo image to see how it might look

We added a reference to an onBack() method to allow the user to navigate back to the Welcome View without having to resort to the navigation menu

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.